<template>
  <div class="barComponent" :style="{background: background}" >
    <template v-for="(itemTit, index) in infoArr" >
      <div v-if="index !== 0" class="bar2"></div>
      <div >
        <h5 :style="{color: itemTit.color}" >{{ itemTit.value }}</h5>
        <span>{{ itemTit.name }}</span>
      </div>
    </template>
  </div>
</template>

<script>
let option = {
  series: [
    {
      type: 'gauge',
      startAngle: 360,
      endAngle: 0,
      min: 0,
      max: 100,
      splitNumber: 10,
      radius: '80%',
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      itemStyle: {
        color: '#58D9F9'
      },
      progress: {
        show: true,
        roundCap: true,
        width: 10
      },
      pointer: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      title: {
        show: false
      },
      detail: {
        width: '60%',
        lineHeight: 20,
        height: 40,
        offsetCenter: [0, 0],
        valueAnimation: true,
        formatter: function (value) {
          return '{value|' + value.toFixed(0) + '%}\n{unit|上线率}';
        },
        rich: {
          value: {
            fontSize: 28,
            fontWeight: 'bolder',
            color: '#00FFE6'
          },
          unit: {
            fontSize: 15,
            align: 'center',
            color: '#fff',
            padding: [0, 0, -20, 10]
          }
        }
      },
      data: [
        {
          value: 50
        }
      ]
    },
    {
      type: 'gauge',
      startAngle: 360,
      endAngle: 0,
      min: 0,
      max: 100,
      splitNumber: 10,
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      itemStyle: {
        color: '#58D9F9'
      },
      progress: {
        show: true,
        roundCap: true,
        width: 2
      },
      pointer: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      title: {
        show: false
      },
      detail: {
        show: false
      },
      radius: '90%',
      data: [
        {
          value: 100
        }
      ]
    }
  ]
};

export default {
  name: "barComponent",
  props:{
    infoArr: {
      type:Array,
      default:[]
    },
    background:{
      type:String,
      default:"#00FFE6"
    }
  },
  data(){
    return {

    }
  },
  mounted() {

  },
  methods: {

  },
  beforeDestroy() {
  }
}
</script>

<style lang="scss" scoped>
  .barComponent{
    width: 90%;
    background: #0092FF;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    > div{
      text-align: center;
      padding: 3% 0;
      >H5{
        font-size: x-large;
        font-weight: 800;
        padding-bottom: 10%;
      }
      >span{
        color: #FFFFFF;
        font-size: initial;
        font-weight: 600;
      }
    }
  }
</style>
